<template>
  <div id="container">
    <div class="view" id="views"></div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import nodesData from "../assets/mockData/data";
export default {
  name: "HelloWorld",
  data() {
    return {
      map:
        "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
      // map:"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
      m1: require("@/assets/images/svg/camera_m_1.svg"),
      vueArcGis: {
        ClassBreaksRenderer: null,
        SpatialReference: null,
        PopupTemplate: null,
        fcl: null
      },
      newArcGis: {
        map: null
      }
    };
  },
  methods: {
    async initLayer(data) {
      // 设置点聚合大小
      const renderer = this.createClusterRenderer();

      // 配置属性
      const options = {
        clusterRenderer: renderer,
        spatialReference: new this.vueArcGis.SpatialReference({
          wkid: 4326
        }),
        displayFlares: false, // 是否显示聚合子类，即环绕周围的小圆圈
        clusterRatio: 200, // 设置每个集群边界的大小
        data: data
      };

      const clusterLayer = new this.vueArcGis.fcl.FlareClusterLayer(options);
      this.newArcGis.map.add(clusterLayer);
    },
    createClusterRenderer() {
      let defaultSym = this.createPointSymbol(
        [0, 0, 255],
        "circle",
        8,
        [0, 0, 255],
        1
      );
      let renderer = new this.vueArcGis.ClassBreaksRenderer({
        defaultSymbol: defaultSym
      });
      renderer.field = "clusterCount";
      const smSymbol = this.createPictureSymbol(this.m1, "20", "20");
      const mdSymbol = this.createPictureSymbol(this.m1, "35", "35");
      const lgSymbol = this.createPictureSymbol(this.m1, "50", "50");
      const xlSymbol = this.createPictureSymbol(this.m1, "70", "70");

      renderer.addClassBreakInfo(0, 10, smSymbol);
      renderer.addClassBreakInfo(11, 20, mdSymbol);
      renderer.addClassBreakInfo(21, 40, lgSymbol);
      renderer.addClassBreakInfo(41, Infinity, xlSymbol);

      return renderer;
    },
    createPictureSymbol(url, width, height) {
      return {
        type: "picture-marker",
        url,
        width,
        height
      };
    },
    createPointSymbol(color, style, size, outlineColor, outlineWidth) {
      return {
        type: "simple-marker",
        style: style,
        color: color,
        size: size,
        outline: {
          color: outlineColor,
          width: outlineWidth
        }
      };
    },
    createSimpleFillSymbol(color, style = "solid", outlineColor, outlineWidth) {
      return {
        type: "simple-fill",
        style,
        color,
        outline: {
          color: outlineColor,
          width: outlineWidth
        }
      };
    }
  },
  mounted() {
    loadModules([
      "esri/Map",
      "esri/layers/TileLayer",
      "esri/views/SceneView",
      "esri/renderers/ClassBreaksRenderer",
      "esri/geometry/SpatialReference",
      `http://${location.host}/fcl/FlareClusterLayer_v4.js`, //这里改为你项目的地址 （该项目默认启动为http://localhost:8080/）
      "esri/PopupTemplate"
    ])
      .then(
        ([
          Map,
          TileLayer,
          SceneView,
          ClassBreaksRenderer,
          SpatialReference,
          fcl,
          PopupTemplate
        ]) => {
          this.vueArcGis = {
            ClassBreaksRenderer,
            SpatialReference,
            PopupTemplate,
            fcl,
            TileLayer: TileLayer
          };

          const mapLayer = new TileLayer({ url: this.map }); // 底图地图
          const map = new Map({
            layers: [mapLayer]
          });
          // const mapView = new MapView({
          //     map: map,
          //     container: "views",
          //     center: [121.8192766890, 39.0565858993], // 大连 中心点
          //     scale: 164521
          // });

          const mapView = new SceneView({
            container: "views",
            map: map,
            qualityProfile: "high"
          });

          mapView.ui._removeComponents(["attribution"]); //去掉logo
          //   mapView.ui.move(["zoom"], "bottom-right"); // 缩放控件移动到右下方
          mapView.when(() => {
            // 地图加载完成
            const allPoints = [];
            for (const key in nodesData) {
              const { x, y = null, ...extra } = nodesData[key];
              if (x && y) {
                allPoints.push({
                  x,
                  y,
                  key,
                  ...extra
                });
              }
            }
            this.initLayer(allPoints);
            setTimeout(() => {
              mapView.goTo({
                // 视角切换动画
                center: [100, 31], //终点坐标
                heading: 360, // 面向正南
                z: 10000,
                tilt: 0, //视图角度cos
                zoom: 5 //放大等级
              });
            }, 1000);
          });

          mapView.on("click", event => {
            var screenPoint = {
              //当前点击的经纬度
              x: event.x,
              y: event.y
            };
            mapView.hitTest(screenPoint).then(response => {
              console.log(response);
              if (response.results.length > 0 && response.results[0].graphic) {
                let [{ graphic: { attributes } } = res] = response.results;
                console.log("这是当前点击的点位信息", attributes);
                //处理高亮显示
              }
            });
          });

          this.newArcGis = { map };
        }
      )
      .catch(() => {
        // handle any errors
        //console.error(err);
      });
  }
};
</script>

<style>
#container,
.view {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
</style>
